<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getByIdService } from '../../api/goods.js'
	import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
	import { getWatermar } from '../../api/login.js'
	
	const watermarText = ref('')
	const isHide = ref(false)
	
	
	getWatermar().then(res => {
		if(!res.data.hide){
			watermarText.value = res.data.text
			isHide.value = true
		}
	})
	
	const goods = ref({})
	const id = ref('')
	onLoad( async (options) => {
		id.value = options.id
		const res = await getByIdService(options.id)
		goods.value = res.data
		console.log(res);
	})
	
	// 控制下单
	const handlePlaceOrder = () => {
		console.log('下单', id.value);
		uni.navigateTo({
			url:'/pages/order/purchase?id=' + id.value
		})
	}
	
</script>

<template>
	<view class="container">
		
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
		
		
		<view class="head-img">
			<image :src="`https://images.weserv.nl/?url=${goods.images}`" mode="scaleToFill"></image>
		</view>
		<view class="body">
			<view class="text">
				<view class="text-item">
					<text class="money">￥8000</text>
				</view>
				
				<view class="text-item">
					<text class="title">{{ goods.goodName }}</text>
				</view>
				<view class="text-item sales">
					<view>
						<text>销量：3件</text>
						<text>0人评价</text>
					</view>
				</view>
				
				<view class="divider"/>
				
				<view class="text-item sales">
					<view class="baozhang">
						<text class="big">保障服务</text>
						<text class="small">与商家所有交流确保留有证据</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="bottom-region">

			<button @click="handlePlaceOrder">立即购买</button>
		</view>
		
	</view>
</template>

<style scoped lang="scss">
	
	.bottom-region {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: white;
		
		button {
			margin-top: 10rpx;
			border-radius: 20rpx;
			background-color: red;
			color: white;
			text-align: center;
			width: 80%;
			height: 80%;
		}
		
	}
	
	.divider{
		margin-top: 20rpx;
		 background: #E0E3DA;
		 width: 100%;
		 height: 5rpx;
		}
	
	.sales {
		//box-shadow: -1px 1.875rem 3px -20rpx #282C35;
		view {
			margin-top: 25rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
		}
		.baozhang {
			.big {
				font-size: 50rpx;
				color: red;
			}
			.small {
				align-self: center;
			}
		}
	}
	
	.body {
		margin-top: 10rpx;
		.title {
			font-size: 32rpx;
			font-weight: 600;
		}
		.text-item {
			margin-top: 10rpx;
		}
		.money {
			color: red;
			font-size: 40rpx;
		}
	}
	.container {
		padding: 20rpx;
	}
	.head-img {
		width: 100%;
		height: 500rpx;
		image {
			width: 100%;
		}
	}
</style>
